<template>
  <img
    src="/static/leftMask.png"
    class="fixed top-0 left-0 w-[420px] h-full"
    alt=""
  />
  <div
    class="fixed z-[10] w-[500px] top-[36px] bottom-[50px] animate__animated animate__fadeInLeft"
  >
    <homeLeft v-if="nowActive == 'home'"></homeLeft>
    <huanbaoLeft v-if="nowActive == 'huanbaojianche'"></huanbaoLeft>
    <renliLeft v-if="nowActive == 'renliziyuan'"></renliLeft>
    <zonghefuwuLeft v-if="nowActive == 'zonghefuwu'"></zonghefuwuLeft>
    <jiaotongLeft v-if="['jiaotongwuliu'].includes(nowActive)"></jiaotongLeft>
    <yingjiLeft v-if="['yingjiguanli'].includes(nowActive)"></yingjiLeft>
    <jinjiLeft v-if="nowActive == 'jingjifenxi'"></jinjiLeft>
    <!--    <jiaotongLeft v-if="nowActive == 'jiaotongwuliu'"></jiaotongLeft>-->
  </div>
  <zonghefuwuMiddle v-if="nowActive == 'zonghefuwu'"></zonghefuwuMiddle>
</template>
<script setup>
import { storeToRefs } from "pinia";
import homeLeft from "@/components/three/component/bigScreetn/home/left.vue";
import huanbaoLeft from "@/components/three/component/bigScreetn/huanbaojianche/left.vue";
import renliLeft from "@/components/three/component/bigScreetn/renliziyuan/left.vue";
import jiaotongLeft from "@/components/three/component/bigScreetn/jiaotongwuliu/left.vue";
import yingjiLeft from "@/components/three/component/bigScreetn/yingjiguanli/left.vue";
import zonghefuwuLeft from "@/components/three/component/bigScreetn/zonghefuwu/left.vue";
import zonghefuwuMiddle from "@/components/three/component/bigScreetn/zonghefuwu/middle.vue";
import jinjiLeft from "@/components/three/component/bigScreetn/jinjiyunxin/left.vue";
import { commonStore } from "@/stores";
const comStore = commonStore();
const { nowActive } = storeToRefs(comStore);
</script>

<style scoped lang="less">
.transitionPanel {
  transition:
    opacity 0.7s ease-in-out,
    width 0.9s ease-in-out,
    left 0.7s ease-in-out;
}
.showPanel {
  opacity: 1;
  left: 0;
  //width: 100%;
}
.hidePanel {
  opacity: 0;
  left: -120%;
  //width: 0;
}
.opt {
  transition:
    right 0.7s ease-in-out,
    left 0.7s ease-in-out;
}
.optToLeft {
  left: 360px;
}
.optToRight {
  left: 0;
}
</style>
